<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>06_组件实例三大属性1_state</title>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.2.0/umd/react.production.min.js"></script>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>

    <div id="test"></div>
    <script type="text/babel">
            // 1.创建组件
        class Weather extends React.Component {
            // 2.初始化state基础属性
            constructor(props) {
                super(props);
                this.state = { temp: 20, isHot: true };
            }
            render() {
                const { temp, isHot } = this.state;
                return (
                    console.log(this),
                    <div>今天天气很 {temp >= 30 ? '炎热' : '凉爽'}, 温度:{temp}</div>
                )
            }
        }

        const root = ReactDOM.createRoot(document.getElementById("test"));
        root.render(<Weather />);
    </script>

</body>

</html>